<template>
  <div class="selector">
    <div @click="routerTo('/coupe')" class="selector-item">
      <img src="@/assets/img/book.png" alt="" />
      <div class="textBox">鸟类字典</div>
    </div>
    <div @click="routerTo('/distribution')" class="selector-item">
      <img src="@/assets/img/nanchang.png" alt="" />
      <div class="textBox">南昌鸟类</div>
    </div>
    <div @click="routerTo('plan')" class="selector-item">
      <img src="@/assets/img/out.png" alt="" />
      <div class="textBox">观鸟规划</div>
    </div>
    <div class="selector-item" @click="doUpload">
      <img src="@/assets/img/camera2.png" alt="" />
      <div class="textBox">拍照识鸟</div>
    </div>
  </div>
  <van-uploader
    v-model="imgList"
    style="display: none"
    :after-read="afterReadByUrl"
    :max-count="1"
    ref="myUpload"
  />
  <!-- preview-full-image="{{ false }}" -->
  <van-dialog :show="show" @confirm="onConfirm" title="识别结果">
    <div class="wrapper">
      <van-grid :column-num="3">
        <van-grid-item v-for="(item, index) in identifyRes" :key="index">
          {{ item.name }} - {{ item.score }}
        </van-grid-item>
      </van-grid>
    </div>
  </van-dialog>
</template>
<script>
import { reactive, toRefs, ref } from "@vue/reactivity";
import { useRouter } from "vue-router";
import { onBeforeMount } from "@vue/runtime-core";
import { searchBirdByImg, searchbirdByBase64 } from "@/api/interface";
import { useStore } from "vuex";
import { Toast } from "vant";

import { upload } from "@/api/interface";
// import { postData } from "@/api/fetch";
export default {
  setup() {
    const myUpload = ref(null);
    const store = useStore();
    const state = reactive({
      imgList: [],
      show: false,
      identifyRes: [],
    });
    const router = useRouter();

    const doUpload = () => {
      if (!store.state.userinfo.Vip.isVip) {
        Toast("请联系管理员开启你的权限");
        return;
      }
      myUpload.value.chooseFile();
    };
    const routerTo = (url) => {
      router.push({
        path: url,
      });
    };
    const onConfirm = () => {
      state.show = false;
    };
    const afterReadByUrl = async () => {
      // let formData = new FormData();
      // formData.append("file", file.file);
      // let baseData = file.content.replace(/^data:image\/\w+;base64,/, "");
      // let baseData = file.content;
      // let sendData = baseData.replace(/^data:image\/\w+;base64,/, "");
      const formData = new FormData();
      state.imgList &&
        state.imgList.forEach(async (item) => {
          formData.append("file", item.file);
        });

      if (state.imgList.length != 0) {
        Toast.loading({
          duration: 0,
          forbidClick: true,
          message: "图片上传中",
        });
        await upload(formData)
          .then((res) => {
            state.imgList = res.data;
          })
          .catch((err) => {
            console.log("Home.vue--文件上传到后端后，后端返回的错误", err);
          });
      }
      await searchBirdByImg({ imgUrl: state.imgList[0] })
        .then((res) => {
          state.identifyRes = res.result.result;
          state.show = true;
          Toast.clear();
          Toast("识别成功！");
        })
        .catch((err) => {
          console.log("BIRD", err);
        });
    };
    const afterRead = async (file) => {
      let formData = new FormData();
      formData.append("file", file.file);
      let baseData = file.content.replace(/^data:image\/\w+;base64,/, "");
      let sendData = baseData.replace(/^data:image\/\w+;base64,/, "");
      await searchbirdByBase64({ image: sendData })
        .then((res) => {
          state.identifyRes = res.result.result;
          state.show = true;
          Toast.clear();
          Toast("识别成功！");
        })
        .catch((err) => {
          Toast.clear();
          console.log("BIRD", err);
        });
    };
    onBeforeMount(() => {});
    return {
      ...toRefs(state),
      myUpload,
      doUpload,
      afterRead,
      routerTo,
      onConfirm,
      afterReadByUrl,
    };
  },
};
</script>
<style lang="less" scoped>
.selector {
  box-sizing: border-box;
  width: 95%;
  margin: 10px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  box-shadow: 5px 5px 10px #eeeeee, -5px -5px 10px #eeeeee;
}
.selector-item {
  // box-sizing: border-box;
  margin: 0 5px;
  width: 25%;
  padding: 10px;
  border-radius: 50px;
  img {
    width: 40px;
    height: 40px;
  }
  .textBox {
    padding-top: 3px;
    font-size: 12px;
    color: rgb(83, 82, 82);
  }
}
.wrapper {
  width: 80vw;
  font-size: 10px;
}
</style>
